$(function (){
    // 第二：使用 layui 提供的模块
    layui.use(function(){
        // 第三：获取具体的 layui 模块实例对象 - 便于调用其方法，实现相关的操作
        // 1.获取相关模块的实例对象
        let table = layui.table;
        let form = layui.form;
        let layer = layui.layer;
        let util = layui.util;
        let $ = layui.jquery ;

        // 2.动态渲染表格数据
        table.render({
            // 2.1)绑定表格节点
            elem: '#test',
            // 2.2)访问服务器程序，获取数据
            url:'../adminInfo/listAdminInfo',

            // 2.3)定义表格各列，以及数据的绑定
            cols: [[
                {type: 'checkbox', fixed: 'left',align: "center"},
                {field:'adminInfoId',width:100,  title: '账号编号'},
                {field:'adminInfoName',width:100,  title: '用户名'},
                {field:'adminInfoPwd',width:100,  title: '密码'},
                {field:'adminInfoGender',width:100,  title: '性别'},
                {field:'adminInfoPhone',width:125,  title: '电话号码'},
                {field:'adminInfoEmail',width:125,  title: '邮箱'},
                {field:'adminInfoUserTime',width:145,  title: '使用时间',templet: function(d) {
                        return util.toDateString(d.adminInfoUserTime * 1000, "yyyy-MM-dd");
                    }},
                {field:'adminInfoStatus',width:80,  title: '状态'},
                {fixed: 'right', title:'操作', minWidth: 110, toolbar: '#barDemo'}
            ]],

            // 2.4)把后台数据转换为 layui 中 table 组件所要求的数据格式，如果参数名称一致，则可以省略
            parseData: function(res){
                return {
                    "code": res.code===200 ? 0 : res.code,
                    "data": res.data.list,
                    "count": res.data.total
                };
            },

            // 2.5）开启分页
            page:true,
            // 2.6）每页显示记录数
            limit: 10,
            // 2.7）设置显示记录数
            limits: [ 10, 15, 20]
        }) ;

        // 4.监听表格操作按钮事件
        table.on('tool(test)',function( obj ){
            // 获取当前行的数据

            let rowData=obj.data;


            // 获取操作按钮自定义的事件名称 - lay-event
            let event = obj.event ;
            if(event==='edit') {

                // 1.设置回显内容
                $("#edit-adminInfoId").val(rowData.adminInfoId)
                $("#edit-adminInfoName").val(rowData.adminInfoName)
                $("#edit-adminInfoPwd").val(rowData.adminInfoPwd)
                $("#edit-adminInfoGender").val(rowData.adminInfoGender)
                $("#edit-adminInfoPhone").val(rowData.adminInfoPhone)
                $("#edit-adminInfoEmail").val(rowData.adminInfoEmail)
                $("#edit-adminInfoStatus").val(rowData.adminInfoStatus)

                // 重新渲染表单 - 当单选框、复选框、下拉列表框的数据发生变更时，必须重新渲染表单
                form.render() ;

                // 2.弹出编辑表单
                layer.open({
                    type:1,
                    title:'类型编辑',
                    area:['50%','40em'],
                    resize:false,
                    content:$("#editContainer"),
                    btn:['修改','取消'],
                    btn1:function( index ) {
                        $.ajax({
                            url:'../adminInfo/updateAdminInfo',
                            method:'post',
                            data:$('#editForm').serialize(),
                            success:function(res) {
                                if (res.code == 200){
                                    // 弹出提示框
                                    layer.msg("修改成功", {icon: 6})
                                    // 根据弹出层的索引，关闭弹出确认框
                                    layer.close(index);
                                    // 重新加载表格数据
                                    table.reload('test', {page: {curr: 1}});
                                }
                            }
                        }) ;
                    }
                }) ;
            }else if(event==='del'){
                layer.confirm('确定删除该类型吗？', {icon: 3, title:'提示'}, function(index){
                    $.post('../adminInfo/deloneAdminInfo',{id:rowData.AdminInfoId},function (res){
                        if (res.code == 200){
                            // 弹出提示框
                            layer.msg("删除成功", {icon: 6})
                            // 根据弹出层的索引，关闭弹出确认框
                            layer.close(index);
                            // 重新加载表格数据
                            table.reload('test', {page: {curr: 1}});
                        }
                    })
                    layer.close(index);
                })
            }
        })
        // 6.查询数据
        $("#selectBtn").click(function(){
            // 重载表格 - 本质上再次请求了 product/product_list_page，
            // 并且向 Servlet 传递了两个参数和设置了当前页为第一页
            table.reload('test', {
                page: {
                    // 重新从第 1 页开始
                    curr: 1
                },
                where: {
                    // 传递参数条件
                    name: $("#adminInfoName").val()
                }
            },true);
        }) ;

        $('#addBtn').on('click',function (){
            // 2.弹出添加表单
            layer.open({
                type:1,
                title:'类型添加',
                area:['50%','40em'],
                resize:false,
                content:$("#addContainer"),
                btn:['添加','取消'],
                btn1:function( index ) {
                    $.ajax({
                        url:'../adminInfo/addAdminInfo',
                        method:'post',
                        data:$('#addForm').serialize(),
                        success:function(res) {
                            if (res.code == 200){
                                // 弹出提示框
                                layer.msg("添加成功", {icon: 6})
                                // 根据弹出层的索引，关闭弹出确认框
                                layer.close(index);
                                // 重新加载表格数据
                                table.reload('test', {page: {curr: 1}});
                            }
                        }
                    }) ;
                }
            }) ;
        })
    });
})